<template>
	<view style="padding: 0 20rpx;">
		<view class="header-title">
			<text class="header-text">填写水印信息</text>
			<view class="header-close"><up-icon name="close" @click="popupshowclose"></up-icon></view>
		</view>
		<up-form :model="form" :rules="rules" ref="formRef">
			<up-form-item prop="projName" label-width="80" label="工程名称">
				<view v-if="projList && projList[0].length > 0">
					<up-cell :title="form.projName"	:titleStyle="{color:'#C0C4CC',margin:'5px 0px'}"
						isLink style="width: 560rpx;" @click="showProj = true">
					</up-cell>
				</view>
				<view v-else style="width: 560rpx;">
					<up-input v-model="form.projName" placeholder="请输入" border="none"
						suffixIcon="arrow-right" :suffixIconStyle="{fontSize:'16px'}"
						:custom-style="{ padding: '13px', borderBottom: '1px solid #f0f0f0' }" clearable></up-input>
				</view>
			</up-form-item>
			<!--项目选择弹层-->
			<up-picker v-model="form.projId" :show="showProj" :columns="projList" closeOnClickOverlay
				keyName="projName" valueName="id" @cancel="cancel0" @confirm="confirm0"></up-picker>
			<up-form-item prop="content" label-width="80" label="施工内容">
				<up-input v-model="form.content" placeholder="请输入" border="none" 
					suffixIcon="arrow-right" :suffixIconStyle="{fontSize:'16px'}"
					:custom-style="{ padding: '13px', borderBottom: '1px solid #f0f0f0' }" clearable></up-input>
			</up-form-item>
			<up-form-item prop="address" label-width="80" label="地点">
				<up-cell :title="form.address"	:titleStyle="{color:'#C0C4CC'}" 
					isLink style="width: 560rpx;" @click="showAddress = false">
				</up-cell>
			</up-form-item>
			<!--地点-->
			<up-picker v-model="form.address" :show="showAddress" :columns="unitList" closeOnClickOverlay
				keyName="name" valueName="id" @cancel="cancel" @confirm="confirm"></up-picker>
			<up-form-item prop="unitName" label-width="80" label="施工单位">
				<up-cell :title="form.unitName"	:titleStyle="{color:'#C0C4CC',margin:'5px 0px'}" 
					isLink style="width: 560rpx;" @click="showUnit = true">
				</up-cell>
			</up-form-item>
			<!--施工单位选择弹层-->
			<up-picker v-model="form.unitId" :show="showUnit" :columns="unitList" closeOnClickOverlay
				keyName="name" valueName="id" @cancel="cancel2" @confirm="confirm2"></up-picker>
			<view >
				<up-button class="HeaderBut" text="确定" type="primary"
					@click="doConfirm2"></up-button>
			</view>
		</up-form>
	</view>
</template>

<script>
	import engApi from '@/apis/cloud/engineering';
	
	export default {
	  name: 'WatermarkInfo',
	  props:['address','userInfo'],
	  data () {
		  return {
			  form: {
				  projId:'',
				  projName:'',
				  address:this.address?this.address:'请选择',
				  unitName:'江苏绿港数字农业科技有限公司'
			  },
			  rules: {
			    projName: [
					{ required: true, message: '请填写工程名称', trigger: 'change' }
			    ],
				content: [
					{ required: true, message: '请填写施工内容', trigger: 'change' }
				],
			    
			  },
			  showProj:false,
			  projList: [],
			  showAddress:false,
			  showUnit:false,
			  unitList: [
				  [
				  {id:1,name:'江苏绿港数字农业科技有限公司'},
				  {id:2,name:'江苏绿港现代农业发展股份有限公司'},
				  {id:3,name:'江苏建投建设集团有限公司'},
				  ]
			  ],
		  }
	  },
	created() {
		//console.log("123===", this.userInfo)
		this.getProject();
	},
	methods:{
		async getProject() {
			const params = {
				pageNo: 1,
				pageSize: 5,
				projManager: this.userInfo.phone,
			};
			const res = await engApi.queryProject(params);
			if(res.code == 200) {
				//console.log("123-=====",res.data.records)
				this.projList.push(res.data.records);
				this.form.projName = res.data.records[0].projName;
				this.form.projId = res.data.records[0].id;
			}
		},
		popupshowclose () {
			this.$emit('handleClose',null);
		},
		cancel(){
		  	this.showAddress = false;
		},
		confirm(e){
			this.form.address = e.value[0].name;
			this.showAddress = false;
		},
		cancel0(){
			this.showProj = false;
		},
		confirm0(e){
			this.form.projName = e.value[0].projName;
			this.form.projId = e.value[0].id;
			this.showProj = false;
		},
		cancel2(){
			this.showUnit = false;
		},
		confirm2(e){
			this.form.unitName = e.value[0].name;
			this.showUnit = false;
		},
		doConfirm2() {
			this.$refs.formRef.validate().then(res => {
				this.$emit('handleClose', this.form);
			}).catch(errors => {
				//uni.$u.toast('校验失败')
			})
			
		}
	}
}
</script>

<style lang="scss" scoped>
	.header-title {
		height: 100rpx; 
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	    border-bottom: 1px solid #f0f0f0;
		.header-close {
			.up-icon {
				font-size: 40rpx;
			}
		}
	
		.header-text {
			font-size: 40rpx;
		}
	}
</style>